<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>demo..</title>
    <script src="../common/vue.js" type="text/javascript"></script>
    <style type="text/css">

    </style>
</head>
<body>
<!--view-->


<div id="div_test">


  <component :is="currentView" keep-alive></component>




</div>


<script type="text/javascript">


    var home = Vue.extend({
        template:"<span>home span</span>"
    })

    var school = Vue.extend({
        template:"<span>school span</span>"
    })

    var work = Vue.extend({
        template:"<span>work span</span>"
    })

    Vue.component("home",home)
    Vue.component("school",home)
    Vue.component("work",home)


    var parent = new Vue({
        el:"#div_test",
        data:{
            currentView:"work"
        },
        components:{
            home:home,
            work:work,
            school:school
        }

    })








</script>

</body>
</html>